<template>
  <div v-if="reFresh">
    <el-popover ref="popover" placement="top" trigger="click" destroy-on-close>
      <el-cascader-panel
        ref="myCascader"
        v-model="select"
        class="cascader-pop"
        :options="categoryTree"
        :props="{
          multiple: multiple,
          checkStrictly: checkstrictly,
          emitPath: false,
          value: 'categoryId',
          label: 'categoryName',
          children: 'childrenCategoryList'
        }"
        @change="categorySelect"
      />
    </el-popover>
    <draggable v-model="draggablelist" v-bind="{ animation: 150 }" class="categorybox">
      <transition-group>
        <el-tag v-for="item in draggablelist" :key="item.categoryId" size="medium">{{ item.categoryName }}</el-tag>
        <el-button key="add" v-popover:popover type="primary" size="mini">{{ draggablelist.length > 0 ? '编辑' : '新增' }}</el-button>
      </transition-group>
    </draggable>
  </div>
</template>
<script>
/**
 * 多级类目级联选择
 */
import draggable from 'vuedraggable'
export default {
  name: 'CascadeSelect',
  components: {
    draggable
  },
  props: {
    categoryTree: {
      type: Array,
      required: true
    },
    category: {
      type: [Array, Object],
      required: true
    },
    // 多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 只可选择三级
    checkstrictly: {
      type: Boolean,
      default: false
    },
    reFresh: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data() {
    return {
      select: null,
      draggablelist: []
    }
  },
  watch: {
    category: {
      deep: true,
      handler(val) {
        this.setOption()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setOption()
    })
  },
  methods: {
    setOption() {
      if (this.multiple) {
        // category 为数组
        this.select = []
        if (this.category.length) {
          this.draggablelist = this.category
          this.category.map(item => {
            this.select.push(item.categoryId)
          })
        } else {
          this.$nextTick(() => {
            this.clearSelect()
          })
        }
      } else {
        // category 为对象
        if (Object.keys(this.category).length) {
          if (this.draggablelist.length) {
            this.draggablelist.splice(0, 1, { categoryId: this.category.categoryId, categoryName: this.category.categoryName })
          } else {
            this.draggablelist.push({ categoryId: this.category.categoryId, categoryName: this.category.categoryName })
          }
          this.select = this.category.categoryId
        } else {
          this.$nextTick(() => {
            this.clearSelect()
          })
        }
      }
    },
    categorySelect() {
      const $NodeList = this.$refs.myCascader.getCheckedNodes()
      this.draggablelist = []
      $NodeList.map(item => {
        this.draggablelist.push({ categoryId: item.value, categoryName: item.label })
      })
    },
    clearSelect() {
      this.$refs.myCascader.clearCheckedNodes()
      this.draggablelist = []
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.cascader-pop {
  border: transparent;
}
.categorybox {
  .el-tag {
    margin-right: 10px;
    cursor: move;
  }
}
</style>
